<template>
  <div class="about">
    <titleTop></titleTop>
    <div class="ecarts_content_wrap">
      <div class="left_wrap">
        <div class="left1"></div>
        <div class="left2"></div>
        <div class="left3"></div>
      </div>
      <div class="center_wrap">
        <ul class="top">
          <li>
            <span class="center_num">156622563</span>
            <span class="center_text">累计确诊</span>
          </li>
          <li>
            <span class="center_num">32050060</span>
            <span class="center_text">现存确诊</span>
          </li>
          <li>
            <span class="center_num">121309348</span>
            <span class="center_text">累计治愈</span>
          </li>
          <li>
            <span class="center_num">3263155</span>
            <span class="center_text">累计死亡</span>
          </li>
        </ul>

        <centermap></centermap>
      </div>
      <div class="right_wrap">
        <div class="right1"></div>
        <div class="right2"></div>
        <div class="right3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import titleTop from "@/components/title_top.vue";
import centermap from "@/components/centerMap";
import echarts from "echarts";
import $ from "jquery";
export default {
  name: "aboutView",
  components: {
    titleTop,
    centermap,
  },
  data() {
    return {};
  },
  methods: {
    //1.初始echarts
    addChart(dom, option) {
      let myChart = echarts.init(dom);
      option && myChart.setOption(option);
      //页面尺寸改变时,图表跟着变化。注意此处事件不能直接给到window上面
      // window.onresize = function () {
      //   myChart.resize();
      // };
      // //用事件绑定方法,不会被覆盖
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    leftOne(data) {
      var xData = [],
        yData = [];
      data.forEach((item) => {
        xData.push(item.nation);
        yData.push(item.addConfirm);
      });
      console.log(xData, yData, "37");
      var min = 50;
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              opacity: 0,
            },
          },
          formatter: function (prams) {
            if (prams[0].data === min) {
              return "合格率：0%";
            } else {
              return "合格率：" + prams[0].data + "%";
            }
          },
        },
        legend: {
          data: ["直接访问", "背景"],
          show: false,
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "5%",
          top: "7%",
          height: "85%",
          containLabel: true,
          z: 22,
        },
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
                fontSize: 10,
              },
            },
            axisLabel: {
              show: true,
              color: "rgb(170,170,170)",
              fontSize: 10,
              textStyle: { color: "#fff", fontSize: 10 },
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value} %",
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: min,
            max: 100,
            splitNumber: 12,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: "合格率",
            type: "bar",
            barWidth: "30%",
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#2f89cf",
                  },
                ]),
              },
            },

            data: yData,
            zlevel: 11,
          },
        ],
      };
      return option;
    },
  },
  mounted() {
    let p = new Promise((resolve, reject) => {
      //异步请求的结果
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp", //接收jsonp数据。！！！注意jsonp只支持get请求,而且要求后端得配合返回jsonp的数据格式-cb({数据})
        success(res) {
          // console.log("成功", res.data);
          let data = JSON.parse(res.data); //注意后端数据返的是字符串的，需要转成对象
          resolve(data);
        },
        error(err) {
          // console.log("失败", err);
          reject(err);
        },
      });
    });
    p.then((res) => {
      console.log(res);
      //传统方法-不好维护
      //1.准备图表
      // var xAxis = [],
      //   yAxis = [];
      // res.countryAddConfirmRankList.forEach((item) => {
      //   xAxis.push(item.nation);
      //   yAxis.push(item.addConfirm);
      // });

      // let option = {
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow",
      //     },
      //   },
      //   grid: {
      //     top: "15%",
      //     right: "3%",
      //     left: "15%",
      //     bottom: "22%",
      //   },
      //   xAxis: [
      //     {
      //       type: "category",
      //       data: xAxis,

      //       axisLabel: {
      //         margin: 10,
      //         color: "#e2e9ff",
      //         textStyle: {
      //           fontSize: 14,
      //         },
      //       },
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       axisLabel: {
      //         formatter: "{value}",
      //         color: "#e2e9ff",
      //       },
      //       axisLine: {
      //         show: false,
      //       },
      //       splitLine: {
      //         lineStyle: {
      //           color: "rgba(255,255,255,0.12)",
      //         },
      //       },
      //     },
      //   ],
      //   series: [
      //     {
      //       type: "bar",
      //       data: yAxis,
      //       barWidth: "10px",
      //       itemStyle: {
      //         normal: {
      //           color: "#3B80E2",
      //           barBorderRadius: [30, 30, 30, 30],
      //           shadowColor: "rgba(0,160,221,1)",
      //           shadowBlur: 4,
      //         },
      //       },
      //     },
      //   ],
      // };
      //2.echarts初始化
      // var chartDom = document.querySelector(".left1");
      // var myChart = echarts.init(chartDom);
      // option && myChart.setOption(option);
      // window.onresize = function () {
      //   myChart.resize();
      // };

      //封装下公用方法
      //左1图表
      //传统方法-不好维护
      //1.准备图表
      // var xAxis = [],
      //   yAxis = [];
      // res.countryAddConfirmRankList.forEach((item) => {
      //   xAxis.push(item.nation);
      //   yAxis.push(item.addConfirm);
      // });

      // let option = {
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow",
      //     },
      //   },
      //   grid: {
      //     top: "15%",
      //     right: "3%",
      //     left: "15%",
      //     bottom: "22%",
      //   },
      //   xAxis: [
      //     {
      //       type: "category",
      //       data: xAxis,

      //       axisLabel: {
      //         margin: 10,
      //         color: "#e2e9ff",
      //         textStyle: {
      //           fontSize: 14,
      //         },
      //       },
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       axisLabel: {
      //         formatter: "{value}",
      //         color: "#e2e9ff",
      //       },
      //       axisLine: {
      //         show: false,
      //       },
      //       splitLine: {
      //         lineStyle: {
      //           color: "rgba(255,255,255,0.12)",
      //         },
      //       },
      //     },
      //   ],
      //   series: [
      //     {
      //       type: "bar",
      //       data: yAxis,
      //       barWidth: "10px",
      //       itemStyle: {
      //         normal: {
      //           color: "#3B80E2",
      //           barBorderRadius: [30, 30, 30, 30],
      //           shadowColor: "rgba(0,160,221,1)",
      //           shadowBlur: 4,
      //         },
      //       },
      //     },
      //   ],
      // };
      //2.echarts初始化
      // var chartDom = document.querySelector(".left1");
      // var myChart = echarts.init(chartDom);
      // option && myChart.setOption(option);
      // window.onresize = function () {
      //   myChart.resize();
      // };

      //封装下公用方法
      //左1图表
      var leftDom1 = document.querySelector(".left1");
      let left1 = this.leftOne(res.countryAddConfirmRankList);
      this.addChart(leftDom1, left1);
    });
  },
};
</script>
<style lang="scss" scoped>
.about {
  list-style: none;
  background-image: url("../assets/image/bg.jpg");
  .ecarts_content_wrap {
    display: flex;
    .left_wrap {
      flex: 45;
      div {
        height: 270px;
        margin-top: 10px;

        border: 1px solid #ccc;
        background-image: url(../assets/image/line.png);
      }
    }
    .center_wrap {
      flex: 80;
      margin: 0 10px;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.1);
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          .center_num {
            color: #cfc271;
            font-size: 20px;
          }
          .center_text {
            margin-top: 20px;
            color: rgb(241, 232, 232);
            font-size: 14px;
          }
        }
      }
    }
    .right_wrap {
      flex: 45;
      div {
        height: 270px;
        margin-top: 10px;
        border: 1px solid #ccc;
        background-image: url(../assets/image/line.png);
      }
    }
  }
}
</style>
